<template>
<div class="home">
  <div class="van-cell-group van-hairline--top-bottom home-search" :class="[scollerTop150?searchBg1:searchBg2]" @click="$router.push({path:'/search'})">
    <div class="van-cell van-hairline">
      <div class="van-cell__title">
        <i class="van-icon van-icon-search"></i>
      </div>
      <div class="van-cell__value van-cell__value--alone">
        <span>请输入需要查询的商品名称</span>
      </div>
    </div>
  </div>
  <van-pull-refresh v-model="isLoading">

    <c-swiper :banners="index.slideshow"></c-swiper>
    <div class="home-hd">
      <van-row>
        <van-col span="8">
          <van-icon name="passed" />100%正品保证</van-col>
        <van-col span="8">
          <van-icon name="passed" />全国超值价格</van-col>
        <van-col span="8">
          <van-icon name="passed" />9天无理由退货</van-col>
      </van-row>
    </div>
    <home-m1pro :proList="index.novicePushProds"></home-m1pro>
    <product-list-square :proList="indexProduct" :show-title="true"></product-list-square>
  </van-pull-refresh>
</div>
</template>
<script>
import {
  mapState,
  mapGetters,
  mapActions
} from 'vuex'
import * as Scorll from '../utils/scroll'
export default {
  data() {
    return {
      isLoading: false,
      scollerTop150: false, // 滚动条距顶部是否为150px
      searchBg1: 'search-bg1',
      searchBg2: 'search-bg2',
      code: this.$route.query.code,
      curPageNO: 0
    }
  },
  computed: {
    ...mapState([
      'accessToken',
      'expireTime'
    ]),
    ...mapGetters([
      'index',
      'indexProduct'
    ])
  },
  created() {
    this.wxLogin({
      code: this.code
    })
    this.getIndex()
    this.getIndexProduct({
      curPageNO: 1
    })
  },
  methods: {
    ...mapActions([
      'getIndex',
      'getIndexProduct',
      'wxLogin'
    ]),
    top120() {
      let thisVue = this;
      this.scroll = document.body.scrollTop;
      if (Scorll.getScrollTop() <= 150) {
        thisVue.scollerTop150 = false
      } else {
        thisVue.scollerTop150 = true
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.top120);
    // let thisVue = this;
    // window.onscroll = function() {
    //   if (Scorll.getBottom() <= 30) {
    //     thisVue.curPageNO++
    //       thisVue.getIndexProduct({
    //         curPageNO: thisVue.curPageNO
    //       })
    //   }
    // }
  },
  watch: {
    isLoading() {
      if (this.isLoading) {
        setTimeout(() => {
          this.$toast({
            message: '刷新成功',
            duration: 500
          });
          this.isLoading = false;
        }, 2000);
      }
    }
  }
}
</script>
<style lang="scss">
@import '../assets/styles/common.scss';
.home {
    height: 100vh;
    &-search {
        width: 100%;
        padding: px2rem(10px) 5%;
        z-index: 1000;
        box-sizing: border-box;
        // border-radius: px2rem(80px);
        display: block;
        position: fixed;
        top: 0;
        &.van-cell-group {
            margin-top: 0;
        }
        &.van-hairline--top-bottom::after {
            border-width: 0;
        }
        &.search-bg1 {
            .van-cell {
                background-color: #d8d8d8;
                color: #fff;
            }
            box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
            -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
        }
        &.search-bg2 {
            .van-cell {
                background-color: #fff;
                color: black;
            }

            box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
            -webkit-box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);
            background: linear-gradient(180deg,rgba(0,0,0,.6),transparent);
        }
        .van-cell {
            display: inline-block;
            padding: px2rem(5px) px2rem(10px);
            border-radius: px2rem(25px);
        }
        .van-cell__value {
            font-size: px2rem(12px);
        }
    }
    &-hd {
        margin-top: px2rem(8px);
        text-align: center;
        @include font-dpr(12px);
        background-color: #fff;
        color: #d24f67;
        height: px2rem(35px);
        line-height: px2rem(30px);
    }
    .van-icon {
        margin-right: px2rem(6px);
    }
}
</style>
